<template>
    <div>
        <!-- 上传及裁剪组件 -->
        <el-upload
                ref="uploadRef"
                style="padding: 1.6em"
                action=""
                list-type="picture-card"
                :limit="1"
                accept=".bmp, .jpg, .png, .jpeg, .swf"
                :auto-upload="false"
                :show-file-list="false"
                @mouseover="showMask = true"
                @mouseout="showMask = false"
                @change="handleChange"
        >
            <div v-if="showMask" class="mask">
                <el-icon size="20" color="#fff">
                    <Edit />
                </el-icon>
            </div>
            <template #default="{ file }">
                <el-image
                        v-if="file"
                        :src="file.url"
                        fit="cover"
                        class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
            </template>
        </el-upload>
        <div class="el-upload__tip">(点击或拖拽上传图片)</div>

        <!-- 图片裁剪对话框 -->
        <el-dialog
                v-model="dialogVisible"
                title="图片裁剪"
                width="40%"
        >
            <div class="cropper">
                <vueCropper
                        ref="cropperRef"
                        v-bind="cropperOptions"
                />
            </div>
            <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmCrop">完成裁剪</el-button>
        </span>
            </template>
        </el-dialog>
    </div>
</template>

<script  setup>
    import { ref, reactive, onMounted } from 'vue';
    //ElMessage
    import { ElMessage } from 'element-plus';
    import { VueCropper } from 'vue-cropper';
    import { blobToBase64,updUserInfo } from '../utlis/file.js'; // 假设的文件处理工具函数

    const uploadRef = ref(null);
    const cropperRef = ref(null);
    const dialogVisible = ref(false);
    const showMask = ref(false);
    const file = ref(null);
    const userId = ref(''); // 假设用户ID来自props或其他方式
    const cropperOptions = reactive({
        img: '', // 裁剪图片的地址
        info: true,
        outputSize: 1,
        outputType: 'jpeg',
        canScale: false,
        autoCrop: true,
        autoCropWidth: 200,
        autoCropHeight: 200,
        fixedBox: false,
        fixed: true,
        fixedNumber: [800, 800],
        full: true,
        canMoveBox: true,
        original: false,
        centerBox: true,
        infoTrue: true
    });

    const handleChange = async (rawFile) => {
        file.value = rawFile.raw;
        const isLt2M = rawFile.raw.size / 1024 / 1024 < 1;
        if (!isLt2M) {
            ElMessage.error('上传头像图片大小不能超过 1MB!');
            return;
        }
        cropperOptions.img = rawFile.raw.url;
        dialogVisible.value = true;
    };

    const confirmCrop = async () => {
        await cropperRef.value.getCropBlob(async (data) => {
            let res = await blobToBase64(data);
            await updUserInfo({ avatar: res, userId: userId.value });
            uploadRef.value.clearFiles();
            dialogVisible.value = false;
            ElMessage.success('头像上传并裁剪成功');
        });
    };

    onMounted(() => {

    });
</script>

<style scoped>
.mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.7s;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.el-upload:hover .mask {
    opacity: 1;
}
</style>
